﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WelcomePage.aspx.cs" Inherits="WelcomePage"
    ValidateRequest="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="resources/styles/style.css" type="text/css" rel="stylesheet" />
    <link href="js/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="js/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="js/highcharts.js" type="text/javascript"></script>
    <script src="js/exporting.js" type="text/javascript"></script>
    <script src="JavaScript/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <script src="JavaScript/common.js" type="text/javascript"></script>
    <script type="text/javascript">
        function showMonthFirstDay() {
            var Nowdate = new Date();
            var MonthFirstDay = new Date(Nowdate.getFullYear(), Nowdate.getMonth(), 1);
            return MonthFirstDay.format("yyyy-MM-dd");
        }
        function showMonthLastDay() {
            var Nowdate = new Date();
            var MonthNextFirstDay = new Date(Nowdate.getFullYear(), Nowdate.getMonth() + 1, 1);
            var MonthLastDay = new Date(MonthNextFirstDay - 86400000);
            return MonthLastDay.format("yyyy-MM-dd");
        }

        var chart;
        var dataChart = eval('(' + '<%= dataChart %>' + ')');
        var dataGrid = eval('(' + '<%= dataGrid %>' + ')');

        var columns = [[
    { field: 'NAME', title: '门店类型', width: 100 },
    { field: 'P_C', title: '计划拜访数', width: 100 },
    { field: 'N_C', title: '未拜访数', width: 100 },
    { field: 'A_C', title: '平均实际拜访次数', width: 100}]];

        var columns1 = [[
    { field: 'NAME', title: '人员姓名', width: 100 },
    { field: 'O_S', title: '目标额', width: 80 },
    { field: 'T_S', title: '营业额', width: 80 },
    { field: 'R_S', title: '达成率', width: 80, formatter: function (value, rec) {
        if (value) { return value + '%'; }
    }
    },
    { field: 'N_S', title: '未完成额', width: 80}]];

        function ShowGrid() {
            $('#Execution').datagrid({
                width: $('#Left').width(),
                height: 200,
                rownumbers: true,
                columns: columns
            });

            $('#Table1').datagrid({
                width: $('#Right').width(),
                height: 200,
                rownumbers: true,
                columns: columns1
            });
            $('#Table1').datagrid('loadData', dataGrid.Table);
        }

        function ShowChart() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    defaultSeriesType: 'pie',
                    forExport: true
                },
                title: {
                    text: ''
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 2) + ' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true, cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                series: dataChart.Table,
                lang: { exportButtonTitle: "保存", downloadJPEG: "另存为JPEG", downloadPNG: "另存为PDF", printButtonTitle: "打印",
                    downloadPNG: "另存为PNG", downloadSVG: "另存为SVG", downloadPDF: "另存为PDF", loading: "加载中..."
                }
            });

            $('#T_S').text('<%= totalT %>');
            $('#S_S').text('<%= totalS %>');
        }

        function BindData() {
            var dataArr = "{'Domain_ID': '<%= MyStateManager.DomainID %>', 'Start_Date': '" + $('#start_date').val() + "', 'End_Date':'" + $('#end_date').val() + "', 'Users_ID':'<%= MyStateManager.UsersID %>'}";
            $.ajax({
                url: "WelcomePage.aspx/SelectMethodDate",
                data: dataArr,
                type: "post",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (getdata) {
                    if (getdata.d == "") {
                        //$.messager.alert('提示消息', '查询无相关数据!', 'info');
                    }
                    else {
                        var data = eval('(' + getdata.d + ')');
                        $('#Execution').datagrid('loadData', data.Table);
                        $('#P_C').progressbar('setValue', data.Table1[0].P_C);
                        $('#T_C').text(data.Table1[0].T_C);
                        $('#N_C').text(data.Table1[0].N_C);
                        $('#I_C').text(data.Table1[0].I_C);
                        $('#A_C').text(data.Table1[0].A_C);
                    }
                },
                error: function (xhr) {
                    $.messager.alert('警告消息', xhr.responseText, 'warning');
                }
            });
        }

        $(function () {
            $('#start_date').val(showMonthFirstDay());
            $('#end_date').val(showMonthLastDay());
            ShowGrid();
            $('#bt_select').click(function () {
                BindData();
            });
            BindData();
            var bro = $.browser;
            if (bro.msie && bro.version > 7.0)
                ShowChart();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 1030px; float: left;">
        <div id="source" style="border: 0px solid #ccc; width: 500px; height: 500px; float: left;
            margin: 5px;">
            <div id="Left" class="easyui-panel" title="拜访执行情况" icon="icon-save" collapsible="true"
                style="width: 500px; height: 450px; padding: 10px; background: #fafafa;">
                <table id="wsd_inputtable">
                    <tr>
                        <td class="tablefield">
                            开始时间
                        </td>
                        <td>
                            <input type="text" class="Wdate" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'end_date\')||\'%y-%M-{%d}\'}'})"
                                id="start_date" />
                        </td>
                        <td class="tablefield">
                            结束时间
                        </td>
                        <td>
                            <input type="text" class="Wdate" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'start_date\')}',maxDate:'#F{$dp.$D(\'start_date\',{d:31});}'})"
                                id="end_date" />
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td class="buttonarea" colspan="5">
                            <input type="button" class="wsd_button2" value="查 询" id="bt_select" />
                        </td>
                    </tr>
                </table>
                <table style="height: 120px;">
                    <tr>
                        <td>
                            未拜访百分比
                        </td>
                        <td colspan="3">
                            <div id="P_C" class="easyui-progressbar" style="width: 140px;">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 80px;">
                            计划拜访数
                        </td>
                        <td style="width: 120px;">
                            <span id="T_C"></span>
                        </td>
                        <td style="width: 100px;">
                            未拜访数
                        </td>
                        <td>
                            <span id="N_C"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            实际拜访数
                        </td>
                        <td>
                            <span id="I_C"></span>
                        </td>
                        <td>
                            平时单店拜访次数
                        </td>
                        <td>
                            <span id="A_C"></span>
                        </td>
                    </tr>
                </table>
                <table id="Execution">
                </table>
            </div>
        </div>
        <div id="target" style="border: 0px solid #ccc; width: 500px; height: 500px; float: left;
            margin: 5px;">
            <div id="Right" class="easyui-panel" title="个人业绩情况" icon="icon-save" collapsible="true"
                style="width: 500px; height: 450px; padding: 10px; background: #fafafa;">
                <div style="float: left; width: 350px; border: 1px solid #ccc;">
                    <div id="container" style="min-width: 200px; height: 200px; margin: 0 auto">
                    </div>
                </div>
                <div style="float: left; border: 0px solid #ccc; padding-left: 10px;">
                    <div style="height: 30px;">
                        总目标额 <span id="T_S"></span>
                    </div>
                    <div>
                        总营业额 <span id="S_S"></span>
                    </div>
                </div>
                <table id="Table1">
                </table>
            </div>
        </div>
    </div>
    </form>
</body>
</html>
